<template>
  <div class="usual-number">
    <el-input-number
      v-model="num"
      :step="1"
      step-strictly
      :min="0"
      :max="max"
      :style="{width:`${width}px`}"
      :controls="false"
      size="mini"
      @input="valueChange"
    />
    <span>{{ label }}</span>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [Number, String],
      default: 0
    },
    max: {
      type: Number,
      default: 999
    },
    width: {
      type: String,
      default: '40'
    }
  },
  data() {
    return {
      num: ''
    }
  },
  created() {
    this.num = Number(this.value ? this.value : 0)
  },
  mounted() {},
  methods: {
    valueChange(val) {
      this.$emit('update:value', val ? val.toString() : '')
    }
  }
}
</script>

<style lang="less" scoped>
.usual-number{
  display: inline-flex;
  align-items: center;
}
:deep(.el-input-number.is-without-controls .el-input__inner){
  padding-left: 4px;
  padding-right: 4px;
}
</style>
